<extend name="Base/common"/>
<block name="title"><title>{$category.title} - {:C('WEB_SITE_TITLE')}</title></block>
<block name="content">
	<div class="container" style="padding-right: 20px;">
		 <div class="category_title"><h1 style="text-align:center;color:#7C7C7C;">{$category.title}</h1></div>
	</div>
    <div class="container">
	<div class="articlelists row">
		<volist name="list" id="article">
			<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
				<div class="gpcard">
					<a class="img-link" href="{:U('Article/detail?id='.$article['id'])}" target="_blank" style="background-image: url('__ROOT__{:get_cover($article['cover_id'],$field = path)}');filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='__ROOT__{:get_cover($article['cover_id'],$field = path)}', sizingMethod='scale');"></a>
					<div class="restrict">
						<div class="topic-title">
							<a class="title" href="{:U('Article/detail?id='.$article['id'])}" target="_blank">
								<h1>{$article.title}</h1>
							</a>
						</div>
						<div class="topic-info">
							<a class="author" href="#" target="_blank">
								<span>{$article.uid|get_nickname}</span>
							</a>
							<a class="publish_time" href="{:U('Article/detail?id='.$article['id'])}" target="_blank">
								<span>发表于 {$article.create_time|date='Y-m-d H:i',###} </span>
							</a>
						</div>
						<div class="abstract"><p>{$article.description}</p></div>
					</div>
					<!-- <div id="sections">
						<a class="classify" href="/collections/%E7%A7%91%E5%B9%BB%E7%89%B9%E8%BE%91" itemprop="articleSection" target="_blank">科幻特辑</a>
					</div> -->
					<div class="operate">
						<!-- <div class="rate">
							<a data-action="like" href="/topics/212309/like" id="topic-like-212309">
								<i class="fa fa-thumbs-o-up"></i>
								<span>7</span>
							</a>
							<a data-action="reply" href="/topics/212309#comment" target="_blank">
								<i class="fa fa-comments"></i>
								<span>4</span>
							</a>
						</div> -->
					</div>
				</div>
			</div>
		</volist>
	</div>
	<div class="load-more" onclick="loadmore('{$category.id}')">加载更多</div>
</div>
<script type="text/javascript">
	var page = 2;

	$(function() {
		$(".topic-title").each(function (i) {
            var divH = $(this).height();
            var $h1 = $("h1", $(this)).eq(0);
            while ($h1.outerHeight() > 50) {
                $h1.text($h1.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
            };
        });
		$(".abstract").each(function (i) {
            var divH = $(this).height();
            var $p = $("p", $(this)).eq(0);
            while ($p.outerHeight() > divH) {
                $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
            };
        });
        var winH = $(window).height(); //页面可视区域的高度
        var lock = true;
        $(window).scroll(function(){
        	var pageH = $(document.body).height(); //页内容高度
        	var scrollT = $(window).scrollTop(); //滚动条top
        	if(lock){
        		if((pageH-winH-scrollT)/winH<0.02){
        			lock = false;
        			loadmore({$category.id});
        			lock = true;
        		}
        	}
        	
        });
	});

	function loadmore(id){
		$.ajax({
			url : "{:U('Article/getmore')}",
			data : {p:page,i:id},
			type : "GET",
			async : false,
			dataType : "json",
			success : function(json){
				if(json){
					$.each(json, function(index, article){
						var str = 
							"<div class=\"col-xs-12 col-sm-6 col-md-4 col-lg-4\"><div class=\"gpcard\"><a class=\"img-link\" href=\""+article['detail_url']+"\" target=\"_blank\" style=\"background-image: url('__ROOT__"+article['img_url']+"');filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='__ROOT__"+article['img_url']+"', sizingMethod='scale');\"></a><div class=\"restrict\"><div class=\"topic-title\"><a class=\"title\" href=\""+article['detail_url']+"\" target=\"_blank\"><h1>"+article.title+"</h1></a></div><div class=\"topic-info\"><a class=\"author\" href=\"#\" target=\"_blank\"><span>"+article['author_name']+"</span></a><a class=\"publish_time\" href=\""+article['detail_url']+"\" target=\"_blank\"><span>发表于 "+article['create_time_f']+" </span></a></div><div class=\"abstract\"><p>"+article.description+"</p></div></div><div class=\"operate\"></div></div></div>";
						$(".articlelists").append(str);
					});
					$(".topic-title").each(function (i) {
            			var divH = $(this).height();
            			var $h1 = $("h1", $(this)).eq(0);
            			while ($h1.outerHeight() > 50) {
                			$h1.text($h1.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
            			};
        			});
					$(".abstract").each(function (i) {
            			var divH = $(this).height();
            			var $p = $("p", $(this)).eq(0);
            			while ($p.outerHeight() > divH) {
                			$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
            			};
        			});
        			page++;
				}else{
					$(".load-more").show().html("已经到底了…");
					return false;
				}
			}
		});
		
	}

</script>
</block>